<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.添加视口标签 快捷方式：meta:vp -->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!--2.设置网页渲染模式  快捷方式：meta:compat  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--3.把bootstrap 核心样式（压缩版）引入-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <title>Document</title>
    <!--6.针对于IE9 以下浏览器做兼容性处理 快捷方式：cc:ie -->
    <!--[if lt IE9 ]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="btn-group">
        <button class="btn btn-primary">打开模态框1</button>
        <button class="btn btn-primary">打开模态框2</button>
        <button class="btn btn-primary">打开模态框3</button>
    </div>


    <!--模态框-->
    <div class="modal fade" id="myModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                 <div class="modal-header">学员信息查看 <button class="close" data-dismiss="modal"><span>&times;</span></button></div>
                    <div class="modal-body">

                    </div>
                    <div class="modal-footer">
                            <button class="btn btn-danger modal-close">关闭</button>
                            <button class="btn btn-primary">更改</button>
                    </div>
            </div>
        </div>
    </div>
<!--4.把jQuery 引入-->
<script src="js/jquery-1.10.2.min.js"></script>
<!--5.把bootstrap 核心脚本文件（压缩版）引入-->
<script src="js/bootstrap.min.js"></script>
    <script>
        $(function(){
        //给按钮组中的按钮添加点击事件
            $(".btn-group button").on("click",function(){
                var btn = $(this);
                $(".modal-body").html(btn.html());
                //调用打开模态框的方法
                $("#myModal").modal({
                    backdrop:false,//无背景
                    keyboard:false//禁用esc关闭模态框
                });

            })

        //给关闭按钮添加点击事件
            $(".modal-close").on("click",function(){
            //调用关闭模态框方法
                $("#myModal").modal('hide');

            })

            //对模态框绑定自定义事件
//            给模态框绑定一个即将要显示事件 show
//            $("#myModal").on("show.bs.modal",function(){
//                alert("模态框即将要显示！")
//            })

//            $("#myModal").on("shown.bs.modal",function(){
//                alert("模态框显示完毕！")
//            })

            //触发即将隐藏
//            $("#myModal").on("hide.bs.modal",function(){
//                alert("模态框即将要隐藏！")
//            })

            $("#myModal").on("hidden.bs.modal",function(){
                alert("模态框隐藏完毕！")
            })


        })
    </script>
</body>
</html>